<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
function editable(sample) {
  return `<div contenteditable>${sample}</div>`;
}

function testIt(command_name, command_value, input, expected, description) {
  selection_test(editable(input), `${command_name} ${command_value}`,
                 editable(expected), description);
}

testIt('fontSize', 4,
       '^abc <font size="4">xyz</font> wxy|',
       '<font size="4">^abc xyz wxy|</font>',
       'font-size-1');
testIt('fontName', 'Arial',
       '^abc <b><font face="Arial">xyz</font></b> wxy|',
       '<font face="Arial">^abc <b>xyz</b> wxy|</font>',
       'font-name-1');
testIt('italic', null,
       '^abc <u><i title="message">xyz </i><i>wxy</i></u>|',
       '<i>^abc <u><span title="message">xyz </span>wxy|</u></i>',
       'italic-1');
testIt('bold', null,
       '^abc <i><b>xyz</b> wxy</i>|',
       '<b>^abc <i>xyz wxy|</i></b>',
       'bold-1');
testIt('bold', null,
       '^abc <i><b class="test">xyz</b> wxy|</i>',
       '<b>^abc <i><span class="test">xyz</span> wxy|</i></b>',
       'bold-2');
testIt('bold', null,
       '^abc <b contenteditable="false">xyz</b> <b>wxy </b><u><b>rst</b></u>|',
       '<b>^abc </b><b contenteditable="false">xyz</b><b> wxy <u>rst|</u></b>',
       'bold-3');
testIt('strikeThrough', null,
       '^abc <b>xyz <strike>wxy</strike></b>|',
       '<strike>^abc <b>xyz wxy|</b></strike>',
       'strike-through-1');
testIt('strikeThrough', null,
       '^abc <i><strike>xyz</strike></i><b><strike>wxy</strike></b> rst|',
       '<strike>^abc <i>xyz</i><b>wxy</b> rst|</strike>',
       'strike-through-2');
testIt('strikeThrough', null,
       '^abc <i><strike>xyz</strike></i> wxy <b><strike>rst</strike></b>|',
       '<strike>^abc <i>xyz</i> wxy <b>rst|</b></strike>',
       'strike-through-3');

// block nodes and br tests
testIt('bold', null,
       '^abc<div><i>xyz</i> <b>wxy</b></div><div>rst</div>|',
       '<b>^abc</b><div><b><i>xyz</i> wxy</b></div><div><b>rst|</b></div>',
       'block-1');
testIt('bold', null,
       '^abc<br style="display: block;"><i><b>xyz</b></i><br><b>wxy|</b>',
       '<b>^abc<br style="display: block;"><i>xyz</i><br>wxy|</b>',
       'block-2');
testIt('bold', null,
       '^abc<p><b>xyz</b> <i><b>w</b>xy</i></p><b>rst|</b>',
       '<b>^abc</b><p><b>xyz <i>wxy</i></b></p><b>rst|</b>',
       'block-3');
</script>
